<template>
  <layout>
    <div slot="body" style="font-size:150%">
      <div>发布详情</div>
      <br>
    </div>
    <div slot="body">
       <TaskInstanceDetailInfo></TaskInstanceDetailInfo>
    </div>
    <div slot="body">
      <shopee-tabs v-model="activeName">
          <shopee-tab-pane label="发布计划" name="tab1">
            <action-table></action-table>
        </shopee-tab-pane>
        <shopee-tab-pane label="展示信息" name="tab2">
            <task-instance-details></task-instance-details>
        </shopee-tab-pane>
        <shopee-tab-pane label="部署详情" name="tab3">
            <task-instance-deploy></task-instance-deploy>
        </shopee-tab-pane>
        <shopee-tab-pane label="发布变量" name="tab4">
            <variable-table></variable-table>
        </shopee-tab-pane>
      </shopee-tabs>
    </div>
  </layout>
</template>

<script>
  import Layout from "@/components/layout_schedulex/layout"
  import TaskInstanceDetails from "@/components/schedulex/TaskInstanceDetails"
  import TaskInstanceDeploy from "@/components/schedulex/TaskInstanceDeploy"
  import ActionTable from "@/components/schedulex/TaskInstanceDeatilsActionTable"
  import VariableTable from "@/components/schedulex/TaskInstanceVariableTable"
  import TaskInstanceDetailInfo from "@/components/schedulex/TaskInstanceDetailInfo"

  export default {
    name: "TaskInstanceDetailsView",
    data(){
      return{
        activeName: 'tab1'
      }
    },
    components: {
      Layout,
      TaskInstanceDetails,
      TaskInstanceDeploy,
      ActionTable,
      VariableTable,
      TaskInstanceDetailInfo
    },
    methods: {

    },
    mounted() {
       if (this.$route.query.tab === "1") {
         this.activeName = 'tab1'
       }else if (this.$route.query.tab === "2") {
          this.activeName = 'tab2'
        }else if (this.$route.query.tab === "3") {
          this.activeName = 'tab3'
        }else if (this.$route.query.tab === "4") {
          this.activeName = 'tab4'
        }
      }
  }
</script>

<style scoped>

</style>
